<!DOCTYPE html>
<!-- nochange.html
     A document for nochange.js
     -->
<html lang = "en">
  <head> 
    <title> nochange.html </title>
    <meta charset = "utf-8" />
    <style type = "text/css">
      td, th, table {border: thin solid black;}
    </style>

<!-- Script for the event handlers -->
    <script type = "text/javascript"  src = "nochange.js" >
    </script>

  </head>
  <body>
    <form action = "">
      <h3> Coffee Order Form </h3>

<!-- A bordered table for item orders -->

      <table>

<!-- First, the column headings --> 

        <tr>
          <th> Product Name </th>
          <th> Price </th>
          <th> Quantity </th>
        </tr>

<!-- Now, the table data entries -->

        <tr>
          <th> French Vanilla (1 lb.) </th>
          <td> $3.49 </td>
          <td> <input type = "text"  id = "french"  
                      size ="2" /> </td>
        </tr>
        <tr>
          <th> Hazlenut Cream (1 lb.) </th>
          <td> $3.95 </td>
          <td> <input type = "text"  id = "hazlenut"  
                size = "2" /> </td>
        </tr> 
        <tr>
          <th> Columbian (1 lb.) </th>
          <td> $4.59 </td>
          <td> <input type = "text"  id = "columbian"  
                size = "2" /></td>
        </tr>
      </table>

<!-- Button for precomputation of the total cost -->

      <p>
        <input type = "button"  value = "Total Cost" 
               onclick = "computeCost();" />
        <input type = "text"  size = "5"  id = "cost" 
               onfocus = "this.blur();" />
      </p>

<!-- The submit and reset buttons -->

      <p>
        <input type = "submit"  value = "Submit Order" /> 
        <input type = "reset"  value = "Clear Order Form" />
      </p>
    </form>
  </body>
</html>
